<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>spring</title>
</head>
<body>
   <canvas id="canvas" width="500" height="500" style="background:#000;"></canvas>
   <script src="../js/utils.js"></script>
   <script src="../js/ball3d.js"></script>
   <script>
        window.onload = function(){
             var canvas = document.querySelector("#canvas"),
                context = canvas.getContext("2d"),
                ball = new Ball3d(),
                tx = Math.random()*500 - 250,
                ty = Math.random()*500 - 250,
                tz = Math.random()*500,
                spring = 0.1,
                friction = 0.94,
                fl = 250,
                vpX = canvas.width/2,
                vpY = canvas.height/2;
            
            window.addEventListener('mousedown', function(e){
                 tx = Math.random()*500 - 250;
                 ty = Math.random()*500 - 250;
                 tz = Math.random()*500; 
            },false);
            
            (function drawFrame(){
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0,0,canvas.width,canvas.height);
                
                var dx = tx - ball.xpos,
                    dy = ty - ball.ypos,
                    dz = tz - ball.zpos,
                    dist = Math.sqrt(dx*dx + dy*dy + dz*dz);
                
                ball.vx += dx*spring;
                ball.vy += dy*spring;
                ball.vz += dz*spring;
                
                ball.vx *= friction;
                ball.vy *= friction;
                ball.vz *= friction;
                
                ball.xpos += ball.vx;
                ball.ypos += ball.vy;
                ball.zpos += ball.vz;
                
                if(ball.zpos > -fl){
                    var scale = fl/(fl+ball.zpos);
                    ball.scaleX = ball.scaleY = scale;
                    ball.x = vpX + ball.xpos*scale;
                    ball.y = vpY + ball.ypos*scale;
                    ball.visible = true;
                }else{
                    ball.visible = false;
                }
                
                if(ball.visible){
                    ball.draw(context);
                }
                
                
            }())
            
            
        }
   </script>
    
</body>
</html>